<template>

	<view class="content">
		<view class="title-top">{{isadd?'注册账号':'添加账号'}}</view>
		<view class="container-login">
			<view class="uni-form-item uni-column">
				<view class="imgcon"><img src="@/static/user.png" /></view>
				<input class="uni-input" v-model="parm.userName" type="text" focus placeholder="请输入用户名" />
			</view>
			<view class="uni-form-item uni-column">
				<view class="imgcon"><img src="@/static/pwa.png" /></view>
				<input class="uni-input" v-model="parm.userpwd" type="text" focus placeholder="请输入密码" />
			</view>
		</view>
		<!-- 	<button @click="getapi">ceshi </button> -->
		<view class="login">
			<view class="wangji">忘记密码</view>
			<view class="wangji" @click="newuser">{{isadd?'前往登录':'快速注册'}}</view>
		</view>
		<view><button @click="addorlogin">{{isadd?'注册':'登录'}}</button></view>


	</view>
</template>

<script>
	import  openSqlite  from '@/utils/sqlex.js'	
	import {
		verifytoken
	} from '@/request/app.js'
	import {
		logs
	} from '@/request/setarticle.js'
	import {
		alluser,
		adduser,
		userinfo
	} from '@/request/app.js'
	import websocketManager from '@/websocketService.js'
	export default {
		data() {
			return {
				dbPath: '',
				webSocket: null,
				isadd: false,
				parm: {
					userName: '',
					userpwd: ''
				}
			}
		},
		beforeCreate() {
			console.log("生命周期")
		},
		methods: {
			created() {},
			getapi() {
				userinfo()
			},
			addorlogin() {

				if (this.isadd) {
					//注册
					adduser(this.parm).then((e) => {
						if (e.code == 200) {
							uni.showToast({
								title: e.msg,
								icon: 'none',
								duration: 2000
							})
						} else {
							uni.showToast({
								title: e.msg,
								icon: 'none',
								duration: 2000
							})
						}
						this.parm.userName = ''
						this.parm.userpwd = ''
						this.isadd = false
					})
				} else {
					//登录
					alluser(this.parm).then((e) => {
						if (e.code == 200) {
								 let dbName=`sqlchat_${e.data.id}`
								 let dbPath=`_doc/dianji_${e.data.id}.db`
								 console.log("登录打开数据库",dbName,dbPath)
								openSqlite.openSqlite(dbName,dbPath)
							// this.connectWebSocket();
							uni.setStorageSync('token', e.data.token);
							this.$store.commit('setToken', e.data.token);
							this.$store.dispatch('startTokenCheck');
							uni.setStorageSync('refreshToken', e.data.refreshToken);
							uni.setStorageSync('id', e.data.id);
							userinfo(e.data.id).then((i) => {
								try {
									// 尝试提交变更
									this.$store.commit('handleChange', i.data);
								} catch (error) {
									// 如果发生错误，打印错误信息到控制台
									logs({
										data: `登录界面使用vuex报错${error}`
									})
								}

								uni.reLaunch({
									url: '/pages/home/index' // 注意路径格式  
								});
							})


						} else {
							uni.showToast({
								title: e.msg,
								icon: 'none',
								duration: 2000
							})
						}
					})
				}
			},
			newuser() {
				this.isadd = !this.isadd
			},
			connectWebSocket() {
				const that = this;
				uni.connectSocket({
					url: 'ws://192.168.31.95:8081',
					success(res) {
						console.log('WebSocket连接成功');
						that.webSocket = res.socket;
					},
					fail(err) {
						console.error('WebSocket连接失败', err);
					}
				});

				// 监听WebSocket消息
				uni.onSocketMessage(function(res) {
					console.log('接收到的消息：', res.data);
				});

				// 发送消息给WebSocket


				// 监听WebSocket关闭
				uni.onSocketClose(function(res) {
					console.log('WebSocket已关闭');
				});
			}

		}
	}
</script>

<style lang="scss">
	.title-top {
		font-size: 1.5rem;
		margin-top: 4rem;
		color: #000;
		font-weight: 600;
	}

	.adduser {
		background-color: #619eff;
	}

	.wangji {
		font-size: 14px;
		color: #666;
		margin-left: 5px;
		line-height: 14px;
	}

	.text {
		font-size: 12px;
		color: #666;
		margin-top: 5px;
	}

	.uni-px-5 {
		padding-left: 10px;
		padding-right: 10px;
	}

	.uni-pb-5 {
		padding-bottom: 10px;
	}

	.container-login {
		margin-top: 5rem;
		width: 14rem;
	}

	.login {
		width: 13rem;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.uni-pb-5 {
			padding: 0px !important;
		}

	}

	button {
		margin-top: 2rem;
		width: 14rem;
		line-height: 2.5rem;
		text-align: center;
		height: 2.5rem;
		background: #4786ff;
		color: #FFFFFF;
	}

	.uni-column {
		display: flex;
		align-items: center;
		height: 4rem;
		justify-content: flex-start;

		.imgcon {
			border-radius: 0.3rem 0px 0px 0.3rem;
			display: flex;
			align-items: center;
			justify-content: center;
			border: 1px solid #aba9a8;
			border-right: 0px;
			width: 2.5rem;
			height: 2.5rem;

			img {
				width: 60%;
				height: 60%;
				object-fit: cover;
			}
		}

		.title {
			margin-top: 0px;
			font-size: 1rem;
			font-weight: 600;
			color: black;
		}
	}

	input {
		text-indent: 0.6rem;
		height: 2.5rem;
		border: 1px solid #aba9a8;
		border-radius: 0px 0.3rem 0.3rem 0px;
	}

	.title {
		margin-top: 3rem;
		font-size: 1.5rem;
		font-weight: 800;
		color: #4786ff;

	}

	.content {
		background-image: url('../../static/back.jpg');
		background-size: cover;
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}
</style>